<template>
  <div class="container" :style="{ height: countHeight + 'px' }">
    <div class="mobileimg_logo2">
      <img src="@/assets/mobileimg/logo2.png" alt />
    </div>
    <div class="gw_title">湖心听</div>
    <p class="fbt_title">乐享杭城车主生活</p>
    <div
      :class="[
        'componentone_img',
        blockanimationtone == true ? 'componentone_imga' : '',
      ]"
    >
      <img src="@/assets/mobileimg/onep.png" alt />
    </div>
    <div class="down_btn">
      <div v-if="flexbtn == true"
       :class="[
          'btn_boxflex',
          flexbtn == true && bgcolor == '#040507'
            ? 'fixedbtnios'
            : flexbtn == true && bgcolor == '#3ddb86'
            ? 'fixedbtnand'
            : '',
        ]"
        :style="{ backgroundColor: bgcolor }"
        @click="appDownload"
      >
        <img :src="srcurl(text)" alt style="width:15px;height:18px;display: block;" />
        <div style="margin-top: 6px;">
          下载
        </div>
      </div>
      <!--  -->
      <div class="btn_box" 
        :style="{ backgroundColor: bgcolor }"
        @click="appDownload"
      >
        <div class="btn_boxleftlogo">
          <img :src="srcurl(text)" alt />
        </div>
        <div>
          <p class="topname_text">{{ text }}</p>
          <p class="botname_tilte">下载</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "componentOne",
  props: {
    blockanimationtone: {
      type: Boolean,
      default: false,
    },
    flexbtn: {
      type: Boolean,
      default: false,
    },
    text: {
      type: String,
      default: "App Store",
    },
    bgcolor: {
      type: String,
      default: "#040507",
    },
    shaow: {
      type: String,
      default: "0px 6px 20px -4px rgba(61, 219, 134, 0.8)",
    },
  },
  data() {
    return {
      prompt: false,
      countHeight:
        document.documentElement.clientHeight || document.body.clientHeight,
    };
  },
  methods: {
    srcurl(mobileImg) {
      if (mobileImg == "Android") {
        mobileImg = "android";
      } else {
        mobileImg = "iphone";
      }
      return require("@/assets/mobileimg/" + mobileImg + ".png");
    },
    appDownload() {
      var sUserAgent = navigator.userAgent.toLowerCase();
      let isweixin = sUserAgent.match(/MicroMessenger/i) == "micromessenger";
      if (isweixin) {
        this.prompt = true;
        this.$emit("clickDownload", this.prompt);
        return;
      }
      if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
        var browser = navigator.userAgent.toLowerCase();

        if (browser.match(/micromessenger/i)) {
          //微信内置浏览器
          // window.location.href = "wxd98e9e44182b4efd";
          window.setTimeout(function () {
            window.location.href =
              "https://apps.apple.com/cn/app/%E6%B9%96%E5%BF%83%E5%90%AC/id1573189749";
          }, 1000);
          return;
        } else {
          // window.location.href = "wxd98e9e44182b4efd"; //ios app协议，由ios同事提供
          window.setTimeout(function () {
            window.location.href =
              "https://apps.apple.com/cn/app/%E6%B9%96%E5%BF%83%E5%90%AC/id1573189749";
          }, 2000);
          return;
        }
      }
      if (navigator.userAgent.match(/android/i)) {
        //Android
        // window.location.href = "app://city_golf"; //安卓协议，由安卓同事提供
        window.setTimeout(function () {
          window.location.href =
            "https://oss.carlinx.cn/files/projects/west-lake-radio/release/apk/west-lake-radio-latest.apk";
        }, 2000);
        return;
      }
    },
  },
  computed: {},
};
</script>
<style lang="scss" scoped>
.container {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("~@/assets/mobileimg/one2x.png") no-repeat center;
  background-size: 100% 100%;
  font-size: 0;
}
.mobileimg_logo2 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top:10%;
  // padding-top: 92px;
  img {
    display: inline-block;
    width: 65px;
    height: 41px;
  }
}
.gw_title {
  font-size: 29px;
  padding: 20px 0;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #3f5084;
  line-height: 29px;
}
.fbt_title {
  font-size: 18px;
  font-family: SourceHanSansSC-Regular, SourceHanSansSC;
  font-weight: 400;
  color: #3f5084;
  line-height: 18px;
  // padding-bottom: 2.5rem;
}
.componentone_img {
  animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  opacity: 1;
  img {
    width: 100%;
    height: 100%;
  }
}
.componentone_imga {
  animation: componentone_imgleft 0.5s 0.25s linear forwards;
}
@keyframes componentone_imgleft {
  from {
    opacity: 0;
    transform: translate3d(375px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0px, 0, 0);
  }
}
@-webkit-keyframes componentone_imgleft {
  from {
    opacity: 0;
    transform: translate3d(375px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0px, 0, 0);
  }
}

.btn_boxleftlogo {
  width: 26.5px;
  height: 31.5px;
  margin-right: 8px;
  img {
    width: 100%;
    height: 100%;
  }
}
.topname_text {
  font-size: 12px;
  font-family: SourceHanSansSC-Regular, SourceHanSansSC;
  font-weight: 400;
  color: #ffffff;
  line-height: 12px;
  margin-bottom: 4px;
}
.botname_tilte {
  font-size: 16px;
  font-family: SourceHanSansSC-Regular, SourceHanSansSC;
  font-weight: 400;
  color: #ffffff;
  line-height: 16px;
}
.down_btn {
  height: 127px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn_box {
  width: 151px;
  height: 42px;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.fixedbtnios {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: fixed;
  // left: 0;
  right: 20px;
  bottom: 80px;
  // margin: 0 auto;
  z-index: 888;
  -moz-box-shadow: 0px 6px 20px -4px rgba(4, 5, 7, 0.8); /* 老的 Firefox 61, 219, 134, 0.8 */
  box-shadow: 0px 6px 20px -4px rgba(4, 5, 7, 0.8);
}
.fixedbtnand {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: fixed;
  // left: 0;
  right: 20px;
  bottom: 80px;
  // margin: 0 auto;
  z-index: 888;
  -moz-box-shadow: 0px 6px 20px -4px rgba(61, 219, 134, 0.8); /* 老的 Firefox 61, 219, 134, 0.8 */
  box-shadow: 0px 6px 20px -4px rgba(61, 219, 134, 0.8);
}
.btn_boxflex{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 14px;
  display: flex;
  flex-direction:column;
  color: #fff;
  justify-content: center;
  align-items: center;  
}
</style>
